Ease Css Vertical Sidebar Links Widget

Home » Websites » Ease Css Vertical Sidebar Links Widget

Ease Css Vertical Sidebar Links Widget

It's the month of welcoming ❀Season Of Spring❀ once again.
You're able to fresh your blog this blooming spring widget on my previous post here .
These season tutorial, I'll be providing vertical links this time,css & html which able to works on blogspot, html websites & even for wordpress interface.
Simply upload them either on your sidebars or on blog/website footer.

Any bloggers whom wish to post or use this widget ,do appreciate if you mentioned or give credits for my work.

Vertical Links on Left Sidebar

View demo from:

<style>
ul.vertical{width: 200px; overflow: auto;background:;list-style-type: none;}
ul.vertical li{text-align: left;}
ul.vertical li a{display: inline-block;text-indent: 5px;overflow: hidden;background:#925074;
font-family:segoe ui light;text-decoration: none;padding: 5px;margin-bottom: 7px; color: #fff;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
ul.vertical li a:hover{padding-right: 30px; color:#AE7AB3;background: #E8E8E8;border:0px solid #AB8399;border-right-width:10px; }
p{font-size:11px ;font-color:#925074;}
</style>
<div>
<ul class="vertical">
<li><a href="Your Link">Home  </a></li>
<li><a href="Your Link">Examples</a></li>
<li><a href="Your Link">About Me</a></li>
<li><a href="Your Link">Download </a></li>
<li><a href="Your Link">Contact Us</a></li>
</ul>
</div>
<p>
<a href='http://www.customizedprofilecovers.com/' rel='nofollow' target='_blank'>by お七</a></p>

Vertical Links on Right Sidebar

View demo from :

<style>
ul.vertical{width: 200px; overflow: auto;background:;list-style-type: none;}
ul.vertical li{text-align: right;}
ul.vertical li a{display: inline-block;text-indent: 5px;overflow: hidden;background:#9F9F9F;
font-family:segoe ui light;text-decoration: none;padding: 5px;margin-bottom: 7px; color: #fff;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
ul.vertical li a:hover{padding-right: 30px; color:#000;background: #eee;border:0px solid #000;border-left-width:10px; }
p{font-size:11px ;font-color:#925074;}
 </style>
<div>
<ul class="vertical">
<li><a href="Your Link">Home</a></li>
<li><a href="Your Link">Sitemap </a></li>
<li><a href="Your Link">About Us</a></li>
<li><a href="Your Link">Contact Us</a></li>
<li><a href="Your Link">Subscribe Here</a></li>
</ul>
</div>
<p>
<a href='http://www.customizedprofilecovers.com/' rel='nofollow' target='_blank'>by お七</a></p>

Select Code
Copy & paste code on your sidebar/footer html gadget.
Remember to replace Your Links to your website links & use your own link for Titles/categories.
Preview your widget first before you hit save button.

Please leave your comment or give me your feedback if you need any help on this widget.
Do join or catch up with (◕ ‿ ◕ ) me again on my next post.
To all happy bloggers out there, (o・・o)/~see you @ googleplus ....